<template>
<div id="box">
<!--    :data="tebleData" 表格中需要渲染的数据
        Label="日期" 表头
        width="列宽"
        prop="date" 当前列需要显示的数据-->
    <div id="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="form.username" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.address" placeholder="地址"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div id="headerTool" style="padding-left:150px;margin-bottom: 20px">
        <el-row>
            <el-button type="primary" plain @click="addInfo">新增</el-button>
            <el-button type="danger" plain @click="deleteInfo">批量删除</el-button>
        </el-row>
    </div>
    <el-table
            :data="tableData"
            @selection-change="handleSelectionChange">
            style="width:80%;margin:0 auto">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="ID">
        </el-table-column>
        <el-table-column
                prop="date"
                label="日期"
                >
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                >
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block" style="padding-left:150px;margin-top:20px">
<!--:current-page 当前页是第几页   :page-sizes 下拉选选项 :page-size每页展示条数     -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="100">
        </el-pagination>
    </div>
    <div>
<!--页面弹窗 visible.sync 控制弹窗是显示还是隐藏-->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form2">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</template>

<script>
export default {
    name: "TableView",
    data() {
        return {
            dialogFormVisible:false,
            form:{
                username:'',
                address:'',
            },
            tableData: [{
                id:1,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {id:2,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {id:3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {id:4,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }

    },
    methods:{
        handleEdit(row){
            console.log(JSON.stringify(row))
            //发送http请求
        },
        handleDelete(row){
            console.log(JSON.stringify(row))
            //发送http请求
        },
        handleSelectionChange(val){
            //val 是选中行的所有数据 一般在删除行时 只需要当前行的id即可 所以可以遍历所有选中行的数据 筛选id 箭头函数

            let ids=val.map(row=>row.id)
            console.log(JSON.stringify(ids))

        },//改变每页显示数据条数时 会自动调用该函数 参数是当前页允许显示数据的条数
        handleSizeChange(limit){
            console.log("每页显示的条数是：",limit)

        },//改变页码时 会自动调用该函数 参数是当前页允许显示数据的条数
        handleCurrentChange(currentpage){
            console.log("当前页码是：",currentpage)

        },
        onSubmit(){

        },
        addInfo(){
            console.log("addInfo")
            this.dialogFormVisible=true

        },
        deleteInfo(){
            console.log("deleteInfo")

        }

    }
}
</script>

<style scoped>
#box{

}
</style>